
import { ZRenderComp } from '../../../common/component/zrComp';
import { gradientColor } from '../../../common/color/color';

import layout from './layout4';
import events from './events';

const teamChar = {
	'1' : 'M208.1,602.7c2.5-30.3,5.7-79.2,9.6-146.8c3.9-67.6,6.1-115.9,6.7-145c-7.2,4.5-14.2,8.9-21.1,13.3' +
		'c-6.8,4.4-21.6,14.8-44.5,31.2c1.2-16.6,2.2-36.1,3.2-58.4c1-22.4,1.5-38.8,1.5-49.4c9.9-5.7,21.2-12.4,33.8-20.2' +
		'c12.6-7.8,20.3-12.7,23.1-14.8s7.1-5.3,12.7-9.8c17.4,0.4,37.5,0.6,60.1,0.6c21.5,0,43.5-0.2,66-0.6l-5.9,65.3l-12.6,216.8' +
		'l-2.9,79.7v38.1c-16.6-0.4-36.8-0.6-60.6-0.6C249.5,602.1,226.5,602.3,208.1,602.7z',
	'2' : 'M83.9,602.7c0.8-9.2,1.4-21.3,1.9-36.4c0.5-15.1,1.1-30.6,1.9-46.4c20.3-16.6,39-32.7,56-48.4' +
		'c27.5-25.4,52-49.2,73.2-71.5c17-17.8,31.2-34.1,42.8-48.9c6.6-8.8,11-16.1,13.2-22c1.6-4.1,2.3-8.3,2.3-12.6' +
		'c0-5.7-1.3-10.6-3.8-14.8c-2.5-4.2-6.5-7.8-12-10.7c-5.5-2.9-12.1-5.3-19.9-7c-7.8-1.8-16.7-2.6-26.7-2.6' +
		'c-13.7,0-28.1,1.2-43.2,3.5c-15.1,2.3-35.8,6.8-62,13.5l7.6-41.9c1.8-8.4,4.3-24.5,7.6-48.3c51.4-8.6,99.5-12.9,144.4-12.9' +
		'c20.5,0,40.1,1.9,58.9,5.6c18.8,3.7,35.5,10,50.4,18.9c14.8,8.9,26,19.2,33.4,31.1c7.4,11.8,11.1,24.6,11.1,38.2' +
		'c0,9-1.1,17.9-3.2,26.7c-2.2,8.4-6.2,18.3-12,29.6c-7.4,14.1-16.6,27.9-27.5,41.6c-16.2,20.5-35,41.7-56.3,63.6' +
		'c-20.3,20.7-44.7,43.9-73.2,69.7l32.2,0.3c7.6,0,22.7-0.2,45.3-0.6c22.6-0.4,38.2-0.8,47-1.2c8.8-0.4,19.6-1.3,32.5-2.6' +
		'c-0.6,9.4-1.5,21.1-2.8,35.2c-1.3,14.1-2.6,31.3-4,51.6c-48.6-0.4-99.5-0.6-152.6-0.6C182.5,602.1,128.3,602.3,83.9,602.7z',
	'3' : 'M100.6,594.8c-2.5-39.6-5.1-71.2-7.6-94.6c43.6,14.6,82.9,22,118.1,22c21.7,0,39.2-4.3,52.6-13' +
		'c13.4-8.7,20.1-20.4,20.1-35c0-14.3-6.8-24.7-20.4-31.3c-13.6-6.6-34.7-10-63.4-10c-18.6,0-35.5,1.1-51,3.2' +
		'c2.7-30.5,5-60.4,6.7-89.9c14.1,2.5,28.8,3.8,44.2,3.8c17.6,0,32.2-1.1,43.8-3.4c11.6-2.2,20.5-6.6,26.5-13.1' +
		'c6.1-6.5,9.1-13.6,9.1-21.2c0-6.8-2.4-12.9-7.2-18.4c-4.8-5.4-12-9.3-21.5-11.5c-9.6-2.2-21.5-3.4-35.7-3.4' +
		'c-12.3,0-25.4,0.7-39.3,2.1c-13.9,1.4-32.7,4.5-56.5,9.4l14.6-68.2c1.2-6.1,2.3-12.5,3.5-19.4c42.4-5.1,81.2-7.6,116.6-7.6' +
		'c23,0,45.2,1.6,66.5,4.7c21.3,3.1,39.5,8.8,54.6,17.1c15.1,8.3,26.3,19.1,33.4,32.4c7.1,13.3,10.7,28.2,10.7,44.8' +
		'c0,10-1.3,19.5-4,28.7c-2.6,9.2-6.7,17.7-12.2,25.6c-5.5,7.9-11.9,14.9-19.3,20.9c-7.4,6.1-14.6,10.9-21.7,14.6' +
		'c-7,3.7-16.4,7.9-28.1,12.6c12.3,2.5,21.9,5.2,28.9,7.9c6.9,2.7,13.9,6.7,20.9,11.9c7,5.2,13,11.2,17.9,18.2' +
		'c4.9,6.9,8.5,14.7,10.8,23.3c2.3,8.6,3.5,17.8,3.5,27.5c0,19.3-4.4,37.2-13.3,53.6c-8.9,16.4-22,30-39.3,40.9' +
		's-37.1,18.6-59.5,23.3c-22.4,4.7-44.9,7-67.5,7c-22.1,0-43.1-1.1-63.1-3.4C153.1,604.7,128.9,600.6,100.6,594.8z',
	'4' : 'M242.1,602.7c1.8-17.4,3.4-35.8,4.8-55.4c1.4-19.5,2.4-35.1,3-46.6l-32,0.3h-24l-110.2,1.8l0.9-9.1' +
		'c0.2-2.1,0.5-8.5,0.9-19l2.3-55.7c0.2-5.1,0.3-10.4,0.3-16.1c19.9-24,42.9-54,68.9-89.8c26.1-35.8,50.9-72.6,74.5-110.3' +
		'c30.1,0.4,57.2,0.6,81.2,0.6c22.7,0,45.9-0.2,69.8-0.6c-3.3,41.4-5.9,81.9-7.7,121.4c-1.8,39.6-2.8,69.5-3,89.8' +
		'c9.4,0.4,20.4,0.6,33,0.6c9.9,0,15.7,0,17.3-0.1c1.6-0.1,5.4-0.3,11.4-0.7c-0.8,23.4-1.2,48.1-1.2,74.1v13.8' +
		'c-11.7-0.8-29-1.2-51.8-1.2l-12,0.3c-1.6,18.9-2.5,52.9-2.5,102c-19.3-0.4-39.3-0.6-60-0.6C286.6,602.1,265.4,602.3,242.1,602.7z' +
		'M266.6,418.4l6.3-132.2c-12.9,20.1-23.5,36.2-31.7,48.1c-8.2,11.9-14.2,20.4-17.9,25.5l-42.6,58.6H266.6z',
	'P' : 'M482.6,602.7l5.8-75l7.6-146.5l3.2-103.7c0.2-11.1,0.3-22.3,0.3-33.4c0-8.4-0.1-22.2-0.3-41.3c25.8,0.6,46.5,0.9,62.1,0.9' +
		'c15,0,35.7-0.4,61.8-1.3c26.2-0.9,48.4-1.3,66.5-1.3c26.2,0,45.6,1.7,58.2,5c12.6,3.3,24,8.5,34.1,15.7' +
		'c10.2,7.1,18.6,15.5,25.2,25c6.6,9.6,11.6,20.5,14.9,32.7c3.3,12.2,5,24.7,5,37.4c0,26.2-6.3,50.1-19,71.8' +
		'c-12.7,21.7-30.6,37.9-53.6,48.6c-23,10.7-48.9,16.1-77.6,16.1c-10.5,0-22.8-1.2-36.6-3.5c-1.6-9-4.5-22.4-8.8-40.1' +
		'c-4.3-17.8-7.8-31-10.5-39.6c8.6,1.8,17.6,2.6,27,2.6c19.7,0,34.4-4.7,44.1-14.2c9.7-9.5,14.5-21,14.5-34.7' +
		'c0-6.6-1.1-12.5-3.2-17.7c-2.2-5.2-5.6-9.4-10.3-12.7c-4.7-3.3-9.9-5.5-15.5-6.4c-5.7-1-12.1-1.5-19.3-1.5c-7,0-14.4,0.2-22,0.6' +
		'l-24.6,1.8c-2.5,37.7-4.4,79.6-5.8,125.7c-2.5,84-3.8,134.4-3.8,151.2v38.1l-58.4-0.6C535.4,602.1,515.1,602.3,482.6,602.7z',
};

/**
 * 显示每个玩家名字、几号玩家的牌子, 场上共有 4 个.
 */
class NameTag extends ZRenderComp {

	// 形状 + 设定数据
	name = '';
	displayName = ''; // 如果太短了, 会中间插空格

	constructor(args) {
		super(args.parent);
		this.useParentZRenderInstance(args.x, args.y);

		/** @type {number} */ this.width = args.width;
		/** @type {number} */ this.height = args.height;
		/** @type {boolean} 左 false 右 true */ this.direction = args.direction;
		/** @type {number} */ this.playerNo = args.playerNo;
		this.setName(this.root.scoreBoard.findPlayer(this.playerNo).name);

		const h = this.height;
		const w = this.width;
		const l = 3; // line width

		this.chip = new NameTagChip({
			parent : this,
			playerNo : args.playerNo,
			width : args.height / 2
		});
		this.pTail = `M-${h/2} -${h/2}l-${h*0.15} ${h*0.15}H-${0.95*h}v${l}H-${0.7*h-3*l}L-${h/2-3*l} -${h/2}z` // 上 1
			+ `M-${h/2} ${h/2}l-${h*0.15} -${h*0.15}H-${0.95*h}v-${l}H-${0.7*h-3*l}L-${h/2-3*l} ${h/2}z` // 下 1
			+ `M-${h} -${h*0.35}H-${1.75*h}v${l}H-${h}z` // 上 2
			+ `M-${h} ${h*0.35}H-${1.75*h}v-${l}H-${h}z` // 下 2
			+ `M-${h*1.8} -${h*0.35-l}H-${h*1.9}l-${0.1*h} ${0.1*h}h-${l}l${0.1*h+l} -${0.1*h+l}H-${h*1.8}z` // 上 3
			+ `M-${h*1.8} ${h*0.35-l}H-${h*1.9}l-${0.1*h} -${0.1*h}h-${l}l${0.1*h+l} ${0.1*h+l}H-${h*1.8}z` // 下 3
			+ `M-${h*0.95} -${h*0.35+l}h${l}v-${l}h-${l}zM-${h*1.05} -${h*0.35+l}h${l}v-${l}h-${l}z` // 上 1-2 的点
			+ `M-${h*0.95} ${h*0.35+l}h${l}v${l}h-${l}zM-${h*1.05} ${h*0.35+l}h${l}v${l}h-${l}z` // 下 1-2 的点
			+ `M-${h*1.75} -${h*0.35+l}h${l}v-${l}h-${l}zM-${h*1.85} -${h*0.35+l}h${l}v-${l}h-${l}z` // 上 2-3 的点
			+ `M-${h*1.75} ${h*0.35+l}h${l}v${l}h-${l}zM-${h*1.85} ${h*0.35+l}h${l}v${l}h-${l}z` // 下 2-3 的点
			;
		this.pHead = `M${h/2} -${h/2}l${h*0.15} ${h*0.15}H${1.2*h}v${l}H${0.7*h-3*l}L${h/2-3*l} -${h/2}z` // 上 1
			+ `M${h/2} ${h/2}l${h*0.15} -${h*0.15}H${1.2*h}v-${l}H${0.7*h-3*l}L${h/2-3*l} ${h/2}z` // 下 1
			+ `M${1.25*h} -${h*0.35}H${w-0.3*h}v${l}H${1.25*h}z` // 上 2
			+ `M${1.25*h} ${h*0.35}H${w-0.35*h}v-${l}H${1.25*h}z` // 下 2
			+ `M${w-0.3*h} -${h*0.35-l}H${w-0.2*h}l${0.1*h} ${0.1*h}h${l}l-${0.1*h+l} -${0.1*h+l}H${w-0.3*h}z` // 上 3
			+ `M${w-0.3*h} ${h*0.35-l}H${w-0.2*h}l${0.1*h} -${0.1*h}h${l}l-${0.1*h+l} ${0.1*h+l}H${w-0.3*h}z` // 下 3
			+ `M${h*1.15} -${h*0.35+l}h${l}v-${l}h-${l}zM${h*1.25} -${h*0.35+l}h${l}v-${l}h-${l}z` // 上 1-2 的点
			+ `M${h*1.15} ${h*0.35+l}h${l}v${l}h-${l}zM${h*1.25} ${h*0.35+l}h${l}v${l}h-${l}z` // 下 1-2 的点
			+ `M${w-0.4*h} -${h*0.35+l}h${l}v-${l}h-${l}zM${w-0.3*h} -${h*0.35+l}h${l}v-${l}h-${l}z` // 上 2-3 的点
			+ `M${w-0.4*h} ${h*0.35+l}h${l}v${l}h-${l}zM${w-0.3*h} ${h*0.35+l}h${l}v${l}h-${l}z` // 下 2-3 的点
			;
		this.pBound = `M-${h*2+l} -${h*0.25-l}l${0.1*h+l} -${0.1*h+l}H-${0.7*h-l}L-${h/2} -${h/2}H${h/2}L${0.65*h} -${0.35*h}H${w-0.2*h}L${w+0.15*h} 0`
			+ `l-${0.35*h} ${0.35*h}H${0.65*h}l-${0.15*h} ${0.15*h}H-${0.5*h}l-${0.15*h} -${0.15*h}H-${h*1.9}l-${0.1*h+l} -${0.1*h+l}z`
			;
		this.on(events.PLAYER_NAME_UPDATED, this.onNameUpdate.bind(this));
		this.on(events.PLAYER_FINISH, this.onBreathDelivered.bind(this));
		this.on(events.BREATH_DELIVER, this.onBreathDelivered.bind(this));
	}

	init() {
		const {width, direction, displayName, playerNo} = this;
		// 写文字
		this.spName = this.createText(displayName, 28)
			.textStyle('center', 'bottom', 'bold', 'Microsoft YaHei UI')
			.textFill(layout.colors.yellowNormal)
			.textShadow(layout.colors.nameTagNormal, 0, 2, 2)
			.position((direction ? 1 : -1) * (width * 0.46), 17)
			.z(30, 199)
			.build();

		// 白色条块
		// let xx = (direction) ? width / 20 : -width / 20;
		this.spClip = this.createPathFromString(this.pBound)
			.defineAsClip()
			.scale(direction ? 1 : -1)
			.build();

		const delta = (direction) ? 1 : -1; // 左 false 右 true
		const h = 60;
		const o = delta * 16;
		let sum = 0;

		this.spArrows = [
			{op : 0.4, w : 3},
			{op : 0.2, w : 6},
			{op : 0.1, w : 10},
			{op : 0.05, w : 24},
		].map(param => {
			const w = param.w * delta;
			sum -= w;
			let path = `M${sum},0l${-o},${h/2}h${w}l${o}-${h/2}l${-o}-${h/2}h${-w}Z`;
			let sp = this.createPathFromString(path)
				.fill('white')
				.opacity(param.op)
				.z(30, 1)
				.build();
			sp.hide();
			sp.setClipPath(this.spClip);

			return sp;
		});

		// tail
		this.spTail = this.createPathFromString(this.pTail)
			.shadow(layout.colors.nameTagBgL3, 12)
			.fill(layout.colors.nameTagBgL3)
			.z(20, 300)
			.scale(this.direction ? 1 : -1)
			.build();

		// head
		this.spHead = this.createPathFromString(this.pHead)
			.shadow(layout.colors.nameTagBgL3, 12)
			.fill(layout.colors.nameTagBgL3)
			.z(20, 300)
			.scale(this.direction ? 1 : -1)
			.build();

		// bound
		this.spBound = this.createPathFromString(this.pBound)
			.shadow(layout.colors.nameTagBg, 8)
			.stroke(layout.colors.nameTagBgL1, 1)
			.fill(layout.colors.nameTagBgD1)
			.opacity(0.7)
			.z(20, 0)
			.scale(this.direction ? 1 : -1)
			.build();

		// 尾巴上的文字
		{
			const offx = 32, offy = 20;
			this.createPathFromString(teamChar[playerNo] + teamChar.P)
				.position((this.direction ? -this.height * 1.25 : this.height * 1.25) - offx, -offy)
				.fill(gradientColor(layout.colors.nameTagNormal, 'white', 0.2).toHexRGB())
				.shadow(layout.colors.nameTagNormal, 10)
				.scale(0.072, 0.05)
				.z(30, 120)
				.build();
		}
	}

	/**
	 * @param {string} name
	 */
	setName(name) {
		this.name = name;
		let displayName = '';
		if (name.length <= 1) {
			displayName = name;
		} else if (name.length <= 7) {
			// 因为看起来太空了, 每两个中文字之间加空格. 英文 / 数字的话就不加了
			const pattern = new RegExp("[A-Za-z0-9]");
			displayName = name[0];
			for (let i = 1; i < name.length; i++) {
				if (!pattern.test(name[i]) || !pattern.test(name[i-1])){
					displayName += ' ';
				}
				displayName += name[i];
			}
		} else {
			displayName = name;
		}
		this.displayName = displayName;

		if (!this.spName) {
			return;
		}
		this.spName.sp.attr({
			style: {
				text: displayName
			}
		});
	}

	/**
	 * 动画上是 Cable 将电流传导到 nameTag 上
	 */
	onBreathDelivered(_, param) {
		if (param.playerNo != this.playerNo) {
			return;
		}
		this.spArrows.forEach(sp => sp.show());
		this.createAnimation('arrow')
			.whenUpdated(p => {
				this.spArrows.forEach(sp => sp.moveTo(p.value));
				this.spClip.moveTo(-p.value);
			})
			.update()
			.when(0, 0)
			.when(500, this.direction ? 400 : -400).callback(() => this.spArrows.forEach(sp => sp.hide()))
			.commit();
	}

	onNameUpdate(_, param) {
		if (param.playerNo != this.playerNo) {
			return;
		}
		this.setName(param.name);
	}
}

/**
 * 名牌中的那个核心, 像芯片一样的那个, 含图片
 */
class NameTagChip extends ZRenderComp {
	/** 半径 */
	angleWidth = 6;
	lineWidth = 3;

	constructor(args) {
		super(args.parent);
		this.useParentZRenderInstance();

		this.width = args.width; // 半径
		this.playerNo = args.playerNo;
	}

	init() {
		const a = this.angleWidth;
		const l = this.lineWidth;
		const w = this.width;

		const pGemstone = `M0 ${w}L${w} 0L0 -${w}L-${w} 0z`; // 轮廓
		// 四个边角
		const pAngles = [
			`M0 ${w+l}l-${a+l} -${a+l}l${l} -${l}l${a} ${a}l${a} -${a}l${l} ${l}L0 ${w+l}z`, // 下
			`M0 -${w+l}l-${a+l} ${a+l}l${l} ${l}l${a} -${a}l${a} ${a}l${l} -${l}L0 -${w+l}z`, // 上
			`M-${w+l} 0l${a+l} ${a+l}l${l} -${l}l-${a} -${a}l${a} -${a}l-${l} -${l}L-${w+l} 0z`, // 左
			`M${w+l} 0l-${a+l} ${a+l}l-${l} -${l}l${a} -${a}l-${a} -${a}l${l} -${l}L${w+l} 0z`, // 右
		];

		// 宝石菱形
		this.spGemstone = this.createPathFromString(pGemstone)
			.shadow(layout.colors.strokeNormal, 12)
			.fill(layout.colors.strokeBgD1)
			.z(30, 300)
			.build();
		this.angles = pAngles.map(path => {
			let sp = this.createPathFromString(path)
				.shadow(layout.colors.strokeNormal, 6)
				.fill(layout.colors.strokeNormal)
				.z(30, 320)
				.build();
			return sp;
		});

		// 图片最后
		this.asyncPutImage();

		this.on(events.BREATH_DELIVER, this.onBreathDelivered.bind(this));
	}

	onBreathDelivered(_, param) {
		if (param.playerNo != this.playerNo) {
			return;
		}

		const { angles } = this;
		this.createAnimation('angle')
			.whenUpdated(p => {
				angles[0].moveTo(0, p.value);
				angles[1].moveTo(0, -p.value);
				angles[2].moveTo(-p.value, 0);
				angles[3].moveTo(p.value, 0);
			})
			.update()
			.when(0, 0).when(50, 5).when(500, 0)
			.commit();
	}

	/**
	 * 异步放图片. TODO, 现在是用同步, 以后异步, 说明图片内容要操作的.
	 */
	asyncPutImage() {
		const { width, playerNo } = this;
		const context = this.root.context;
		const url = context.assetPath(`assets/team_${playerNo}p.png`);
		const w = width / 4 * 3;

		this.spImage = this.createImage(url, w * 2, w * 2)
			.shadow(layout.colors.strokeNormal, 18)
			.blend('lighter')
			.opacity(0.7)
			.position(- w, - w)
			.z(30, 310)
			.build();
	}
}

export {
	NameTag
};
